<% content_for "header" do %>
<title><%= translate(locale, "Preferences") %> - Invidious</title>
<% end %>

<div class="h-box">
    <form class="pure-form pure-form-aligned" action="/preferences?referer=<%= URI.encode_www_form(referer) %>" method="post">
        <fieldset>
            <legend><%= translate(locale, "preferences_category_player") %></legend>

            <div class="pure-control-group">
                <label for="video_loop"><%= translate(locale, "preferences_video_loop_label") %></label>
                <input name="video_loop" id="video_loop" type="checkbox" <% if preferences.video_loop %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="preload"><%= translate(locale, "preferences_preload_label") %></label>
                <input name="preload" id="preload" type="checkbox" <% if preferences.preload %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="autoplay"><%= translate(locale, "preferences_autoplay_label") %></label>
                <input name="autoplay" id="autoplay" type="checkbox" <% if preferences.autoplay %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="continue"><%= translate(locale, "preferences_continue_label") %></label>
                <input name="continue" id="continue" type="checkbox" <% if preferences.continue %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="continue_autoplay"><%= translate(locale, "preferences_continue_autoplay_label") %></label>
                <input name="continue_autoplay" id="continue_autoplay" type="checkbox" <% if preferences.continue_autoplay %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="local"><%= translate(locale, "preferences_local_label") %></label>
                <input name="local" id="local" type="checkbox" <% if preferences.local && !CONFIG.disabled?("local") %>checked<% end %> <% if CONFIG.disabled?("local") %>disabled<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="listen"><%= translate(locale, "preferences_listen_label") %></label>
                <input name="listen" id="listen" type="checkbox" <% if preferences.listen %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="speed"><%= translate(locale, "preferences_speed_label") %></label>
                <select name="speed" id="speed">
                    <% {2.0, 1.75, 1.5, 1.25, 1.0, 0.75, 0.5, 0.25}.each do |option| %>
                        <option <% if preferences.speed == option %> selected <% end %>><%= option %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="quality"><%= translate(locale, "preferences_quality_label") %></label>
                <select name="quality" id="quality">
                    <% {"dash", "hd720", "medium", "small"}.each do |option| %>
                        <% if !(option == "dash" && CONFIG.disabled?("dash")) %>
                            <option value="<%= option %>" <% if preferences.quality == option %> selected <% end %>><%= translate(locale, "preferences_quality_option_" + option) %></option>
                        <% end %>
                    <% end %>
                </select>
            </div>

            <% if !CONFIG.disabled?("dash") %>
                <div class="pure-control-group">
                    <label for="quality_dash"><%= translate(locale, "preferences_quality_dash_label") %></label>
                    <select name="quality_dash" id="quality_dash">
                        <% {"auto", "best", "4320p", "2160p", "1440p", "1080p", "720p", "480p", "360p", "240p", "144p", "worst"}.each do |option| %>
                            <option value="<%= option %>" <% if preferences.quality_dash == option %> selected <% end %>><%= translate(locale, "preferences_quality_dash_option_" + option) %></option>
                        <% end %>
                    </select>
                </div>
            <% end %>

            <div class="pure-control-group">
                <label for="volume"><%= translate(locale, "preferences_volume_label") %></label>
                <input name="volume" id="volume" data-onrange="update_volume_value" type="range" min="0" max="100" step="5" value="<%= preferences.volume %>">
                <span class="pure-form-message-inline" id="volume-value"><%= preferences.volume %></span>
            </div>

            <div class="pure-control-group">
                <label for="comments[0]"><%= translate(locale, "preferences_comments_label") %></label>
                <% preferences.comments.each_with_index do |comments, index| %>
                    <select name="comments[<%= index %>]" id="comments[<%= index %>]">
                        <% {"", "youtube", "reddit"}.each do |option| %>
                            <option value="<%= option %>" <% if preferences.comments[index] == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
                        <% end %>
                    </select>
                <% end %>
            </div>

            <div class="pure-control-group">
                <label for="captions[0]"><%= translate(locale, "preferences_captions_label") %></label>
                <% preferences.captions.each_with_index do |caption, index| %>
                    <select class="pure-u-1-6" name="captions[<%= index %>]" id="captions[<%= index %>]">
                        <% Invidious::Videos::Captions::LANGUAGES.each do |option| %>
                            <option value="<%= option %>" <% if preferences.captions[index] == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
                        <% end %>
                    </select>
                <% end %>
            </div>

            <div class="pure-control-group">
                <label for="related_videos"><%= translate(locale, "preferences_related_videos_label") %></label>
                <input name="related_videos" id="related_videos" type="checkbox" <% if preferences.related_videos %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="annotations"><%= translate(locale, "preferences_annotations_label") %></label>
                <input name="annotations" id="annotations" type="checkbox" <% if preferences.annotations %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="extend_desc"><%= translate(locale, "preferences_extend_desc_label") %></label>
                <input name="extend_desc" id="extend_desc" type="checkbox" <% if preferences.extend_desc %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="vr_mode"><%= translate(locale, "preferences_vr_mode_label") %></label>
                <input name="vr_mode" id="vr_mode" type="checkbox" <% if preferences.vr_mode %>checked<% end %>>
            </div>

            <div class="pure-control-group">
                <label for="save_player_pos"><%= translate(locale, "preferences_save_player_pos_label") %></label>
                <input name="save_player_pos" id="save_player_pos" type="checkbox" <% if preferences.save_player_pos %>checked<% end %>>
            </div>

            <% if user = env.get?("user").try &.as(User) %>
                <% playlists = Invidious::Database::Playlists.select_user_created_playlists(user.email) %>
                <div class="pure-control-group">
                    <label for="default_playlist"><%= translate(locale, "preferences_default_playlist") %></label>
                    <select name="default_playlist" id="default_playlist">
                        <option value=""><%= translate(locale, "preferences_default_playlist_none") %></option>
                        <% playlists.each do |plid, playlist_title| %>
                            <option value="<%= plid %>" <%= "selected" if user.preferences.default_playlist == plid %>><%= HTML.escape(playlist_title) %></option>
                        <% end %>
                    </select>
                </div>
            <% end %>

            <legend><%= translate(locale, "preferences_category_visual") %></legend>

            <div class="pure-control-group">
                <label for="locale"><%= translate(locale, "preferences_locale_label") %></label>
                <select name="locale" id="locale">
                    <% LOCALES_LIST.each do |iso_name, full_name| %>
                        <option value="<%= iso_name %>" <% if preferences.locale == iso_name %> selected <% end %>><%= HTML.escape(full_name) %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="region"><%= translate(locale, "preferences_region_label") %></label>
                <select name="region" id="region">
                    <% CONTENT_REGIONS.each do |option| %>
                        <option value="<%= option %>" <% if preferences.region == option %> selected <% end %>><%= option %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="player_style"><%= translate(locale, "preferences_player_style_label") %></label>
                <select name="player_style" id="player_style">
                    <% {"invidious", "youtube"}.each do |option| %>
                        <option value="<%= option %>" <% if preferences.player_style == option %> selected <% end %>><%= translate(locale, option) %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="dark_mode"><%= translate(locale, "preferences_dark_mode_label") %></label>
                <select name="dark_mode" id="dark_mode">
                    <% {"", "light", "dark"}.each do |option| %>
                        <option value="<%= option %>" <% if preferences.dark_mode == option %> selected <% end %>><%= translate(locale, option.blank? ? "auto" : option) %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="thin_mode"><%= translate(locale, "preferences_thin_mode_label") %></label>
                <input name="thin_mode" id="thin_mode" type="checkbox" <% if preferences.thin_mode %>checked<% end %>>
            </div>

            <% if env.get?("user") %>
                <% feed_options = {"", "Popular", "Trending", "Subscriptions", "Playlists"} %>
            <% else %>
                <% feed_options = {"", "Popular", "Trending"} %>
            <% end %>

            <div class="pure-control-group">
                <label for="default_home"><%= translate(locale, "preferences_default_home_label") %></label>
                <select name="default_home" id="default_home">
                    <% feed_options.each do |option| %>
                        <option value="<%= option %>" <% if preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                    <% end %>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="feed_menu"><%= translate(locale, "preferences_feed_menu_label") %></label>
                <% (feed_options.size - 1).times do |index| %>
                    <select name="feed_menu[<%= index %>]" id="feed_menu[<%= index %>]">
                        <% feed_options.each do |option| %>
                            <option value="<%= option %>" <% if preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                        <% end %>
                    </select>
                <% end %>
            </div>
            <% if env.get? "user" %>
                <div class="pure-control-group">
                    <label for="show_nick"><%= translate(locale, "preferences_show_nick_label") %></label>
                    <input name="show_nick" id="show_nick" type="checkbox" <% if preferences.show_nick %>checked<% end %>>
                </div>
            <% end %>

            <legend><%= translate(locale, "preferences_category_misc") %></legend>

            <div class="pure-control-group">
                <label for="automatic_instance_redirect"><%= translate(locale, "preferences_automatic_instance_redirect_label") %></label>
                <input name="automatic_instance_redirect" id="automatic_instance_redirect" type="checkbox" <% if preferences.automatic_instance_redirect %>checked<% end %>>
            </div>

            <% if env.get? "user" %>
                <legend><%= translate(locale, "preferences_category_subscription") %></legend>

                <div class="pure-control-group">
                    <label for="watch_history"><%= translate(locale, "preferences_watch_history_label") %></label>
                    <input name="watch_history" id="watch_history" type="checkbox" <% if preferences.watch_history %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="annotations_subscribed"><%= translate(locale, "preferences_annotations_subscribed_label") %></label>
                    <input name="annotations_subscribed" id="annotations_subscribed" type="checkbox" <% if preferences.annotations_subscribed %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="max_results"><%= translate(locale, "preferences_max_results_label") %></label>
                    <input name="max_results" id="max_results" type="number" value="<%= preferences.max_results %>">
                </div>

                <div class="pure-control-group">
                    <label for="sort"><%= translate(locale, "preferences_sort_label") %></label>
                    <select name="sort" id="sort">
                        <% {"published", "published - reverse", "alphabetically", "alphabetically - reverse", "channel name", "channel name - reverse"}.each do |option| %>
                            <option value="<%= option %>" <% if preferences.sort == option %> selected <% end %>><%= translate(locale, option) %></option>
                        <% end %>
                    </select>
                </div>

                <div class="pure-control-group">
                    <% if preferences.unseen_only %>
                        <label for="latest_only"><%= translate(locale, "Only show latest unwatched video from channel: ") %></label>
                    <% else %>
                        <label for="latest_only"><%= translate(locale, "Only show latest video from channel: ") %></label>
                    <% end %>
                    <input name="latest_only" id="latest_only" type="checkbox" <% if preferences.latest_only %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="unseen_only"><%= translate(locale, "preferences_unseen_only_label") %></label>
                    <input name="unseen_only" id="unseen_only" type="checkbox" <% if preferences.unseen_only %>checked<% end %>>
                </div>

                <% if CONFIG.enable_user_notifications %>
                <div class="pure-control-group">
                    <label for="notifications_only"><%= translate(locale, "preferences_notifications_only_label") %></label>
                    <input name="notifications_only" id="notifications_only" type="checkbox" <% if preferences.notifications_only %>checked<% end %>>
                </div>

                <% # Web notifications are only supported over HTTPS %>
                <% if Kemal.config.ssl || CONFIG.https_only %>
                    <div class="pure-control-group">
                        <a href="#" data-onclick="notification_requestPermission"><%= translate(locale, "Enable web notifications") %></a>
                    </div>
                <% end %>
                <% end %>
            <% end %>

            <% if env.get?("user") && CONFIG.admins.includes? env.get?("user").as(Invidious::User).email %>
                <legend><%= translate(locale, "preferences_category_admin") %></legend>

                <div class="pure-control-group">
                    <label for="admin_default_home"><%= translate(locale, "preferences_default_home_label") %></label>
                    <select name="admin_default_home" id="admin_default_home">
                        <% feed_options.each do |option| %>
                            <option value="<%= option %>" <% if CONFIG.default_user_preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
                        <% end %>
                    </select>
                </div>

                <div class="pure-control-group">
                    <label for="admin_feed_menu"><%= translate(locale, "preferences_feed_menu_label") %></label>
                    <% (feed_options.size - 1).times do |index| %>
                        <select name="admin_feed_menu[<%= index %>]" id="admin_feed_menu[<%= index %>]">
                            <% feed_options.each do |option| %>
                                <option value="<%= option %>" <% if CONFIG.default_user_preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
                            <% end %>
                        </select>
                    <% end %>
                </div>

                <div class="pure-control-group">
                    <label for="popular_enabled"><%= translate(locale, "Popular enabled: ") %></label>
                    <input name="popular_enabled" id="popular_enabled" type="checkbox" <% if CONFIG.popular_enabled %>checked<% end %>>
                </div>


                <div class="pure-control-group">
                    <label for="captcha_enabled"><%= translate(locale, "CAPTCHA enabled: ") %></label>
                    <input name="captcha_enabled" id="captcha_enabled" type="checkbox" <% if CONFIG.captcha_enabled %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="login_enabled"><%= translate(locale, "Login enabled: ") %></label>
                    <input name="login_enabled" id="login_enabled" type="checkbox" <% if CONFIG.login_enabled %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="registration_enabled"><%= translate(locale, "Registration enabled: ") %></label>
                    <input name="registration_enabled" id="registration_enabled" type="checkbox" <% if CONFIG.registration_enabled %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="statistics_enabled"><%= translate(locale, "Report statistics: ") %></label>
                    <input name="statistics_enabled" id="statistics_enabled" type="checkbox" <% if CONFIG.statistics_enabled %>checked<% end %>>
                </div>

                <div class="pure-control-group">
                    <label for="modified_source_code_url"><%= translate(locale, "adminprefs_modified_source_code_url_label") %></label>
                    <input name="modified_source_code_url" id="modified_source_code_url" type="url" value="<%= CONFIG.modified_source_code_url %>">
                </div>
            <% end %>

            <% if env.get? "user" %>
                <legend><%= translate(locale, "preferences_category_data") %></legend>

                <div class="pure-control-group">
                    <a href="/clear_watch_history?referer=<%= URI.encode_www_form(referer) %>"><%= translate(locale, "Clear watch history") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/change_password?referer=<%= URI.encode_www_form(referer) %>"><%= translate(locale, "Change password") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/data_control?referer=<%= URI.encode_www_form(referer) %>"><%= translate(locale, "Import/export data") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/subscription_manager"><%= translate(locale, "Manage subscriptions") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/token_manager"><%= translate(locale, "Manage tokens") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/feed/playlists"><%= translate(locale, "View all playlists") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/feed/history"><%= translate(locale, "Watch history") %></a>
                </div>

                <div class="pure-control-group">
                    <a href="/delete_account?referer=<%= URI.encode_www_form(referer) %>"><%= translate(locale, "Delete account") %></a>
                </div>
            <% end %>

            <div class="pure-controls">
                <button type="submit" class="pure-button pure-button-primary"><%= translate(locale, "Save preferences") %></button>
            </div>
        </fieldset>
    </form>
</div>
